<template>
	<div>
		<UpTable :options="isDesktop ? tableOptions : tableOptionsMobile" :data="list || []" idKey="id">
			<template #orderId="{ data: item }">
				<span class="text-t-1">{{ item.orderId }}</span>
			</template>
		</UpTable>
		<BaseMore :isFinish="isFinish" :loading="loading" @load="handleRun(false)" />
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { TableOptions, UpTable } from '@/components/up'
import { BaseMore } from '@/components/base'
import { useRequest } from '@/hooks'
import { getMyBets } from '@/api/other.ts'
import { isDesktop } from '@/hooks'
const tableOptions = computed<TableOptions[]>(() => [
	{
		prop: 'game',
		textT: 'app.rank.game',
		type: 'game'
	},
	{
		prop: 'date',
		textT: 'app.rank.playDate',
		type: 'date',
		align: 'left',
		dateFormat: 'p dd-MM-yyyy'
	},
	{
		prop: 'betAmount',
		hoverProp: 'betAmount',
		textT: 'app.rank.betAmount',
		align: 'right',
		type: 'currency'
	},
	{
		prop: 'edge',
		textT: 'app.rank.odds',
		align: 'right',
		type: 'multiplier'
	},
	{
		prop: 'payoutAmount',
		textT: 'app.rank.payout',
		align: 'right',
		type: 'payout'
	},
	{
		prop: 'orderId',
		textT: 'app.rank.orderId',
		align: 'right'
	}
])
const tableOptionsMobile = computed<TableOptions[]>(() => [
	{
		prop: 'game',
		textT: 'app.rank.game',
		type: 'game'
	},
	{
		prop: 'payoutAmount',
		hoverProp: 'payoutAmount',
		textT: 'app.rank.payout',
		align: 'right',
		type: 'payout'
	}
])
const { run, list, loading, isFinish } = useRequest<any>(getMyBets, {
	showError: true,
	pageSize: 10,
	paramsAlias: { page: 'pageNum' },
	resultAlias: { list: 'content', total: 'totalElements' }
})

const handleRun = async (refresh?: boolean) => {
	await run({ settled: true }, { refresh })
}
onMounted(() => {
	handleRun()
})
</script>
